<template>
  <div class="content-card" @click="handleClick">
    <!-- 图片区域 -->
    <div class="card-image">
      <img v-lazy="{
        src: item.cover,
        error: defaultImage,
        loading: defaultImage
      }"
        :alt="item.title"
        @load="handleImageLoad"
        @error="$event.target.parentElement.classList.add('error')">
      <div class="image-placeholder" v-if="!item.loaded"></div>
    </div>

    <!-- 内容区域 -->
    <div class="card-content">
      <!-- 标题 -->
      <h3 class="card-title" :title="item.title">{{ item.title }}</h3>

      <!-- 标签区域 -->
      <div class="card-tags" v-if="item.tagNames && item.tagNames.length">
        <span class="tag"
              v-for="(tag, index) in item.tagNames"
              :key="index"
              :class="`tag-${index % 5}`">
          {{ tag }}
        </span>
      </div>

      <!-- 元信息 -->
      <div class="card-meta">
        <div class="meta-left">
          <span class="time">{{ formatDate(item.createTime) }}</span>
        </div>
        <div class="meta-right">
          <span class="views">
            <i class="el-icon-view"></i>
            {{ formatNumber(item.viewCount) }}
          </span>
          <span class="likes"
                :class="{ active: item.liked }"
                @click.stop="handleLike">
            <i class="el-icon-star-off"></i>
            {{ formatNumber(item.likeCount) }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate } from '@/utils/toolUtils'

export default {
  name: 'ContentCard',
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      defaultImage: require('@/assets/images/default.gif')
    }
  },
  methods: {
    formatDate,
    handleClick() {
      this.$emit('click', this.item)
    },
    handleLike(event) {
      this.$emit('like', this.item)
    },
    handleImageLoad(event) {
      if (event.target.complete && !event.target.error) {
        event.target.classList.add('loaded');
        this.$emit('imageLoad');
      } else {
        event.target.parentElement.classList.add('error');
      }
    },
    // 格式化数字
    formatNumber(num) {
      if (!num) return '0'
      const n = Number(num)
      if (n >= 10000) {
        return (n / 10000).toFixed(1) + 'w'
      } else if (n >= 1000) {
        return (n / 1000).toFixed(1) + 'k'
      }
      return n.toString()
    }
  }
}
</script>

<style scoped>
.content-card {
  position: relative;
  background: var(--card-bg, #fff);
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid var(--border-color, #eee);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.content-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 图片区域样式优化 */
.card-image {
  position: relative;
  padding-top: 60%; /* Increased height for the image area */
  overflow: hidden;
  background: var(--hover-color, #f5f5f5);
  border-radius: 8px 8px 0 0; /* 添加上方圆角 */
  transform: translateZ(0); /* 启用GPU加速 */
  will-change: transform; /* 优化动画性能 */
}

.card-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 优化过渡动画 */
  backface-visibility: hidden; /* 防止闪烁 */
  transform: scale(1.0001); /* 防止缩放时的锯齿 */
  opacity: 0; /* 初始透明 */
}

/* 图片加载完成后的状态 */
.card-image img.loaded {
  opacity: 1;
  transition: opacity 0.3s ease-in, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 优化图片hover效果 */
.content-card:hover .card-image img.loaded {
  transform: scale(1.05) translateZ(0);
}

/* 添加图片加载占位动画 */
.image-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--hover-color, #f5f5f5) 0%,
    var(--card-bg, #ffffff) 50%,
    var(--hover-color, #f5f5f5) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: 8px 8px 0 0;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* 添加图片加载失败的样式 */
.card-image.error {
  background: var(--hover-color, #f5f5f5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-image.error::after {
  content: '图片加载失败';
  font-size: 12px;
  color: var(--secondary-color, #999);
}

/* 响应式优化 */
@media (max-width: 768px) {
  .card-image {
    border-radius: 6px 6px 0 0;
  }
  
  .image-placeholder {
    border-radius: 6px 6px 0 0;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .card-image {
    background: var(--bg-color, #2d2d2d);
  }
  
  .image-placeholder {
    background: linear-gradient(
      90deg,
      var(--bg-color, #2d2d2d) 0%,
      var(--card-bg, #3d3d3d) 50%,
      var(--bg-color, #2d2d2d) 100%
    );
  }
  
  .card-image.error::after {
    color: var(--secondary-color, #666);
  }
}

/* 内容区域样式 */
.card-content {
  padding: 8px 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px; /* Reduced gap between title and tags */
}

/* 元信息样式 */
.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--secondary-color, #999);
  margin-top: auto;
}

.meta-left, .meta-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.time {
  font-size: 11px;
}

.views, .likes {
  display: flex;
  align-items: center;
  gap: 3px;
}

.views i, .likes i {
  font-size: 12px;
}

.likes {
  cursor: pointer;
}

.likes.active {
  color: #ff4757;
}

/* 小屏幕适配 */
@media screen and (max-width: 375px) {
  .card-content {
    padding: 6px 8px;
  }

  .card-title {
    font-size: 12px;
    line-height: 1.3;
  }

  .card-meta {
    font-size: 11px;
  }

  .time {
    font-size: 10px;
  }

  .meta-left, .meta-right {
    gap: 6px;
  }

  .views i, .likes i {
    font-size: 11px;
  }
}

/* 超小屏幕适配 */
@media screen and (max-width: 320px) {
  .card-content {
    padding: 5px 6px;
  }

  .card-title {
    font-size: 11px;
    -webkit-line-clamp: 2;
  }

  .card-meta {
    font-size: 10px;
  }

  .meta-right {
    gap: 4px;
  }

  .views i, .likes i {
    font-size: 10px;
  }
}

/* 标题样式优化 */
.card-title {
  font-size: 15px;
  font-weight: bold;
  font-style: normal;
  color: var(--text-color, #333);
  line-height: 1.4;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  word-break: break-word;
}

/* 确保在各种屏幕尺寸下省略号正常显示 */
@media screen and (max-width: 375px) {
  .card-title {
    font-size: 12px;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    /* 移除固定高度限制，让省略号自然显示 */
  }
}

@media screen and (max-width: 320px) {
  .card-title {
    font-size: 11px;
    -webkit-line-clamp: 2;
  }
}

/* 标签样式 */
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;  /* 增加标签间距 */
  margin: 6px 0;  /* 调整上下边距 */
}

/* 标签基础样式优化 */
.tag {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);  /* 更平滑的过渡效果 */
  font-weight: 500;
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);  /* 微妙的阴影 */
  backdrop-filter: blur(4px);  /* 磨砂玻璃效果 */
  -webkit-backdrop-filter: blur(4px);
}

/* 标签颜色样式优化 */
.tag-0 {
  color: #2B88FE;
  background: linear-gradient(120deg, rgba(43, 136, 254, 0.15), rgba(43, 136, 254, 0.08));
  border: 1px solid rgba(43, 136, 254, 0.1);
}

.tag-1 {
  color: #0CAF60;
  background: linear-gradient(120deg, rgba(12, 175, 96, 0.15), rgba(12, 175, 96, 0.08));
  border: 1px solid rgba(12, 175, 96, 0.1);
}

.tag-2 {
  color: #FF9500;
  background: linear-gradient(120deg, rgba(255, 149, 0, 0.15), rgba(255, 149, 0, 0.08));
  border: 1px solid rgba(255, 149, 0, 0.1);
}

.tag-3 {
  color: #FF3B30;
  background: linear-gradient(120deg, rgba(255, 59, 48, 0.15), rgba(255, 59, 48, 0.08));
  border: 1px solid rgba(255, 59, 48, 0.1);
}

.tag-4 {
  color: #AF52DE;
  background: linear-gradient(120deg, rgba(175, 82, 222, 0.15), rgba(175, 82, 222, 0.08));
  border: 1px solid rgba(175, 82, 222, 0.1);
}

/* 悬浮效果增强 */
.tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 深色模式优化 */
@media (prefers-color-scheme: dark) {
  .tag {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }

  .tag-0 {
    color: #4C9EFF;
    background: linear-gradient(120deg, rgba(76, 158, 255, 0.25), rgba(76, 158, 255, 0.15));
    border-color: rgba(76, 158, 255, 0.2);
  }

  .tag-1 {
    color: #34D399;
    background: linear-gradient(120deg, rgba(52, 211, 153, 0.25), rgba(52, 211, 153, 0.15));
    border-color: rgba(52, 211, 153, 0.2);
  }

  .tag-2 {
    color: #FFAE35;
    background: linear-gradient(120deg, rgba(255, 174, 53, 0.25), rgba(255, 174, 53, 0.15));
    border-color: rgba(255, 174, 53, 0.2);
  }

  .tag-3 {
    color: #FF6B6B;
    background: linear-gradient(120deg, rgba(255, 107, 107, 0.25), rgba(255, 107, 107, 0.15));
    border-color: rgba(255, 107, 107, 0.2);
  }

  .tag-4 {
    color: #D183FF;
    background: linear-gradient(120deg, rgba(209, 131, 255, 0.25), rgba(209, 131, 255, 0.15));
    border-color: rgba(209, 131, 255, 0.2);
  }

  .tag:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  }
}

/* 移动端优化 */
@media screen and (max-width: 375px) {
  .tag {
    padding: 2px 6px;
    font-size: 10px;
  }

  .card-tags {
    gap: 4px;
    margin: 4px 0;
  }
}

/* CSS 变量定义更新 */
:root {
  --tag-color-0: 43, 136, 254;   /* 深蓝色 */
  --tag-color-1: 12, 175, 96;    /* 深绿色 */
  --tag-color-2: 255, 149, 0;    /* 橙色 */
  --tag-color-3: 255, 59, 48;    /* 红色 */
  --tag-color-4: 175, 82, 222;   /* 紫色 */
}

/* 小屏幕适配 */
@media screen and (max-width: 375px) {
  .tag {
    font-size: 10px;
    padding: 1px 5px;
  }

  .card-tags {
    gap: 3px;
    margin-top: 3px;
  }
}

/* 超小屏幕适配 */
@media screen and (max-width: 320px) {
  .tag {
    font-size: 9px;
    padding: 1px 4px;
  }

  .card-tags {
    gap: 2px;
    margin-top: 2px;
  }
}

/* 确保标签在深色模式下也清晰可见 */
@media (prefers-color-scheme: dark) {
  .tag {
    background: rgba(64, 158, 255, 0.2);
  }
}
</style>
